<section data-ng-controller="SignUpController">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <i class="fa fa-spinner fa-spin"></i> your account is creating...
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
            <h1>Create a new 2order account</h1>

            <form name="registerForm" novalidate
                  mi-submit="submit()">
                <div class="alert alert-danger" id="error-box" ng-show="isServerError">
                    <span ng-bind="serverError"></span>
                </div>
                <div class="form-group" ng-class="{'has-error':(registerForm.username | shouldDisplayError:registerForm)}">
                    <label for="username">Username</label>
                <span ng-show="!registerForm.username.$invalid && registerForm.username.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i>
                </span>
                    <input type="text" class="form-control" id="username" name="username"
                           placeholder="Username" required ng-minlength="6" ng-model="newUser.username"
                           ng-pattern="/^[a-zA-Z_0-9]*$/" mi-check-unique/>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'min'">
            Your username must have more than 6 characters
        </span>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'unique'">
            Someone has used this username, please try another
        </span>
        <span class="help-block" ng-show="registerForm.username | shouldDisplayError:registerForm:'pattern'">
            Username can not contain special characters excepts '_'
        </span>
                </div>
                <div class="form-group" ng-class="{'has-error':(registerForm.email | shouldDisplayError:registerForm)}">
                    <label for="email">Email</label>
                <span ng-show="!registerForm.email.$invalid && registerForm.email.$dirty">
                    <i class="fa fa-check-circle-o" style="color:#4cae4c"></i>
                </span>
                    <input type="email" class="form-control" id="email" name="email"
                           placeholder="Email" required ng-model="newUser.email" mi-check-unique/>
        <span class="help-block" ng-show="registerForm.email | shouldDisplayError:registerForm:'email'">
            Invalid email format
        </span>
        <span class="help-block" ng-show="registerForm.email | shouldDisplayError:registerForm:'unique'">
            This email address has been used. If you forgot your account, recover it <a href="/recovery">here</a> or just <a href="/login">sign in</a>
        </span>
                </div>
                <div class="form-group" ng-class="{'has-error':(registerForm.password | shouldDisplayError:registerForm)}">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password"
                           placeholder="Password" required ng-minlength="6" ng-model="newUser.password"/>
        <span class="help-block" ng-show="registerForm.password | shouldDisplayError:registerForm:'min'">
            Your password must have more than 6 characters
        </span>
                </div>
                <div class="form-group" ng-class="{'has-error': (isMatch() && registerForm.password.$dirty && registerForm.confirmPassword.$dirty)}">
                    <label for="confirmPassword">Confirmed password</label>
                    <input type="password" class="form-control" id="confirmPassword"
                           name="confirmPassword" placeholder="Password confirm" required ng-model="newUser.passwordConfirm"/>
                <span class="help-block" ng-show="isMatch() && registerForm.password.$dirty && registerForm.confirmPassword.$dirty">
                    Your password doesn't match
                </span>
                </div>
                <div class="form-group" name="birthday"
                     ng-class="{'has-error':
                 (registerForm.date | shouldDisplayError:registerForm) &&
                 (registerForm.month | shouldDisplayError:registerForm) &&
                 (registerForm.year | shouldDisplayError:registerForm)}">
                    <label for="date" ng-class="{'has-error':(registerForm.date | shouldDisplayError:registerForm)}">
                        <select id="date" ng-options="date for date in default.dates" name="date" class="form-control" ng-model="newUser.date" mi-date-valid/>
                        <option value="">-- date --</option>
                        </select>
                    </label>
                    <label for="month" ng-class="{'has-error':(registerForm.month | shouldDisplayError:registerForm)}">
                        <select id="month" ng-options="month for month in default.months" name="month" class="form-control" ng-model="newUser.month" mi-date-valid/>
                        <option value="">-- month --</option>
                        </select>
                    </label>
                    <label for="year" ng-class="{'has-error':(registerForm.year | shouldDisplayError:registerForm)}">
                        <select id="year" ng-options="year for year in default.years" name="year" class="form-control" ng-model="newUser.year" mi-date-valid/>
                        <option value="">-- year --</option>
                        </select>
                    </label>
        <span class="help-block" ng-show="registerForm.date | shouldDisplayError:registerForm:'datevalid'">
            Date invalid
        </span>
                </div>
                <div class="form-group">
                    <label>
                        <input type="radio" name="gender" value="male" class="form-control" checked ng-model="newUser.gender"/>Male
                    </label>
                    <label>
                        <input type="radio" name="gender" value="female" class="form-control" ng-model="newUser.gender"/>Female
                    </label>
                </div>

                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            <hr>

            <p>Already have an account? <a href="/login">Login</a></p>
        </div>
    </div>
</section>
